<template>
  <div class="shxq">
    <div class="shxq1">
      <img :src="shlist.picurl" alt="" />
    </div>
    <div class="cont">
      <div class="jiage">
        <span>￥</span>{{ shlist.spJiage }}
      </div>
      <div class="title">{{ shlist.spmc }}</div>
      <div class="r12">

      </div>
      <div class="jiben">
        <div class="jb jbss">
          <div class="dh ">商品规格：{{ shlist.spGuige }}</div>
        </div>
        <div class="jb">
          <div class="dh">商品包装：{{ shlist.spBaozhuang }}</div>
        </div>
        <div class="jb">
          <div class="dh">商品店铺：{{ shlist.shanghuname }}</div>
        </div>
        <div class="jb">
          <div class="dh">线下购买：{{ shlist.shAddress }}</div>
        </div>

      </div>
      <div class="jianjie" v-if="shlist.spjj">
        <div class="jj">简介</div>
        <div class="jj1" v-html="shlist.spjj">
        </div>
      </div>
      <div class="sc">
        <div class="sc1">
          <img @click="shoucang(shlist.sfsc)" v-if="shlist.sfsc == 0" src="../../assets/images/my_sc1.png" alt="" />
          <img @click="quxiao(shlist.sfsc)" v-else src="../../assets/images/sc.png" alt="" />
        </div>
        <div class="sc1 sc2" @click.stop="onShare">
          <img src="../../assets/images/fx.png" alt="" />
        </div>
      </div>
      <div class="goumai" @click="fuzhi()" v-if="shlist.taokouling != null">
        购买
      </div>
      <div class="site" v-else>请前往线下地址购买!</div>
    </div>
    <div class="page_bg" v-if="bankSwitch">
      <img src="../../assets/images/arrows.png" alt="">
      <div class="hint">请点击右上角菜单，进行分享</div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
import { getSpList, postsc, postqxsc, postSaveVisit, getshare } from "@/api/api.js";
export default {
  name: "",
  data() {
    return {
      id: 0,
      shlist: {},
      yhlist: {},
      user: JSON.parse(localStorage.getItem('userlogin')),
      bankSwitch: false,
    };
  },
  created() {
    this.id = this.$route.query.id
    this.yhlist = JSON.parse(localStorage.getItem('userlogin'))
    this.shList()
    this.postSaveVisit()

  },
  mounted() {
    document.addEventListener("click", this.bodyCloseMenus);
  },
  methods: {
    bodyCloseMenus(e) {
      console.log(1111);
      let self = this;
      if (self.bankSwitch == true) {
        self.bankSwitch = false;
      }
    },
    onShare() {
      var broser = window.navigator.userAgent.toLowerCase();
      //通过正则表达式匹配broser 中是否含有MicroMessenger字符串
      if (broser.match(/MicroMessenger/i) == 'micromessenger') {
        console.log('微信浏览器');
        this.bankSwitch = true
      } else {
        Toast('请使用微信浏览器打开!');
      }
    },
    async postSaveVisit() {  //浏览监听
      let res = await postSaveVisit({
        yhid: this.user.id || this.user.yhid,
        lx: 4
      })
    },
    //收藏
    async shoucang(item) {
      if (localStorage.getItem('userlogin')) {
        let res = await postsc({
          yhid: this.yhlist.id || this.user.yhid,
          zyid: this.shlist.fyclassdataid,
          lx: 2

        })
        if (res.data.code == 200) {
          this.shlist.sfsc = 1
          Toast(res.data.msg);
        } else {
          Toast('操作失败');
        }
      } else {
        this.$router.push({ path: "/index", query: {} });
      }


    },
    //取消收藏
    async quxiao(ix) {
      if (localStorage.getItem('userlogin')) {
        let res = await postqxsc({
          yhid: this.yhlist.id || this.user.yhid,
          zyid: this.shlist.fyclassdataid,
          lx: 2

        })
        if (res.data.code == 200) {
          this.shlist.sfsc = 0
          Toast(res.data.msg);
        } else {
          Toast('操作失败');
        }
      } else {
        this.$router.push({ path: "/index", query: {} });
      }


    },
    fuzhi() {
      if (this.shlist.taokouling) {
        this.$copyText(this.shlist.taokouling).then(
          function (e) {
            Toast('复制成功，请前往淘宝App购买！');
          },
          function (e) {
            console.log("copy arguments e:", e);
            alert("复制失败!");
          }
        )
      } else {
        Toast('淘口令为空！');
      }

    },
    async shList() {
      let res = await getSpList({
        id: this.id,
        yhid: this.yhlist.id ? this.yhlist.id : this.user.yhid ? this.user.yhid : ''
      });
      if (res.code == 200) {
        this.shlist = res.data.list[0]
      }
    },
  },
};
</script>
<style scoped lang="scss">
.shxq {
  width: 100%;
  position: relative;

  .shxq1 {
    width: 100%;

    img {
      width: 100%;
      height: 18.6875rem;
    }
  }

  .cont {
    position: relative;
    width: calc(100% - 0rem);
    // height: 33.1875rem;
    background: #ffffff;
    border-radius: 1rem 1rem 0px 0px;
    position: absolute;
    top: 17.5rem;
    left: 0;
    padding: 1.5625rem 0;

    .jiage {
      width: calc(100%- 0rem);
      padding: 0rem 1.5rem 1rem;
      height: 2.0625rem;
      font-size: 1.5rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F15712;
      line-height: 2.0625rem;

      span {
        font-size: .75rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #F15712;
      }
    }

    .title {
      width: calc(100% - 2.5rem);
      font-size: 1.25rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 550;
      color: #333333;
      line-height: 1.8125rem;
      padding: 0 1.25rem;
    }

    .r12 {
      width: calc(100% - 2.5rem);
      margin: 0.625rem 1.25rem 0;
      border-bottom: .0625rem dashed #BDBDBD;
    }

    .jiben {
      position: relative;
      width: calc(100% - 2.5rem);
      padding: 0 1.25rem 0;

      .jb {
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 0.5rem;

        img {
          width: 0.6875rem;
          height: 0.6875rem;
        }

        .dh {
          font-size: 12px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: #666666;
          line-height: 18px;
          // padding-left: 0.5rem;
        }

      }

      .jbss {
        padding-top: 1.25rem;
      }

    }

    .jianjie {
      width: calc(100% - 2.5rem);
      padding: 1.5rem 1.25rem 0;

      .jj {
        font-size: 1rem;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: #333333;
        line-height: 1.5rem;
      }

      .jj1 {
        padding-top: 0.6875rem;
        width: 100%;
        font-size: 0.75rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 1.25rem;
        text-align: justify;
      }
    }

    .sc {
      position: absolute;
      top: -1.25rem;
      right: 2.125rem;
      display: flex;

      .sc1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
        height: 2.5rem;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0px 0px 0.25rem 0px rgba(0, 0, 0, 0.2);

        img {
          width: 1.5rem;
          height: 1.5rem;
        }
      }

      .sc2 {
        margin-left: 0.6875rem;
      }
    }

    .goumai {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 14.4375rem;
      height: 3.125rem;
      background: #6CAAFE;
      border-radius: 20.5625rem;
      font-size: .875rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 1.375rem;
      margin: 6.875rem auto 0;
    }

    .site {
      padding: 0 1.25rem;
      color: #333;
      margin-top: 20px;
      font-size: 1rem;
    }
  }

  .page_bg {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    z-index: 99;

    img {
      width: 12.5rem;
      height: 12.5rem;
      position: absolute;
      right: 1.875rem;
      display: block;
    }

    .hint {
      font-size: .875rem;
      padding-top: 12.5rem;
      text-align: center;
      color: #fff;
    }
  }
}</style>